<!-- 搜索组件 -->
<template>
	<div>
		<!-- 面包屑 -->
		<div class="breadcrumb-box">
			<div class="breadcrumb-content">
				<el-breadcrumb>
					<el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
					<el-breadcrumb-item>全部</el-breadcrumb-item>
					<el-breadcrumb-item>搜索</el-breadcrumb-item>
				</el-breadcrumb>
			</div>
		</div>
		<!-- 分类 -->
		<div class="category-box">
			<div class="category-content">
				<dd class="band">分类:</dd>
				<div v-for="(item, index) in categoryList" :key="index">{{ item }}</div>
			</div>
		</div>
		<!-- 标题 -->
		<div class="title-box">
			<div class="title-content">{{title}}&ensp;商品图如下:</div>
		</div>
		<!-- 商品展示区 -->
		<div class="product-box">
			<div class="product-content">
				<el-row>
					<el-col v-for="(item, index) in productList" :key="index">
						<el-card :body-style="{ padding: '20px' }" shadow="hover" @click="toDetail(item.scdid)">
							<!-- 商品图片 -->
							<img :src="item.imagetableList[0]" class="image" style="width: 95%; height=95%" />
							<!-- 商品信息 -->
							<div class="desc-box">
								<p>{{item.scdname}}</p>
								<p style="margin-top: 5px;">￥{{item.scdprice}}元</p>
							</div>
						</el-card>
					</el-col>
				</el-row>
			</div>
		</div>
	</div>
</template>

<script>
	import {
		Search,
		SearchProduct
	} from "@/utils/product"
	export default {
		components: {},
		data() {
			return {
				// 分类的数据
				categoryList: ["手机", "智能穿搭", "家电", "智能家居"],
				productList: [],
				title: ""
			};
		},
		mounted() {
			//路由跳转过来的情况
			if (this.$route.query.data) {
				
				this.getData(this.$route.query.data)
				this.title = this.$route.query.data
			}
			//搜索框过来的情况
			if (this.$store.state.serachValue != "") {
				this.getDataProduct(this.$store.state.serachValue)
				this.title = this.$store.state.serachValue
			}
		},
		methods: {
			//根据类型搜索商品
			getData(data) {
				Search(data).then(res => {
					this.productList = res.data.data
				})
			},
			//搜索框搜索商品
			getDataProduct(data) {
				SearchProduct(data).then(res => {
					this.productList = res.data.data
				})
			},
			//去详情页面
			toDetail(value) {
				this.$router.push(`/detail/${value}`);
			}
		},
		computed: {
			searchData() {
				return this.$store.state.serachValue
			},

		},
		watch: {
			searchData: function(a, b) {
				this.getDataProduct(a)
				this.title = a
			},

		}
	};
</script>

<style scoped>
	.breadcrumb-box,
	.product-box,
	.title-box {
		background: #f5f5f5;
	}

	.breadcrumb-content {
		padding-left: 20px;
		width: 1280px;
		height: 41px;
		line-height: 41pa;
		margin: 0 auto;
	}

	.el-breadcrumb__item {
		height: 41px;
	}

	.category-box {
		height: 84px;
	}

	.category-content {
		width: 1280px;
		height: 84px;
		display: flex;
		margin: 0 auto;
		line-height: 84px;
	}

	.category-content div {
		font-size: 16px;
		width: 148px;
	}

	.category-content div:hover {
		cursor: pointer;
		color: #ff6700;
	}

	.band {
		padding-left: 10px;
		text-align: left;
		width: 148px;
		font-size: 15px;
		color: #757575;
	}

	.title-content {
		padding-top: 20px;
		width: 1280px;
		margin: 0 auto;
		height: 41px;
		line-height: 41px;
		text-align: left;
		padding-left: 15px;
		font-size: 15px;
		font-weight: bold;
	}

	.product-content {
		padding-top: 20px;
		width: 1280px;
		margin: 0 auto;
	}

	.el-col-24 {
		margin-bottom: 15px;
		margin-left: 10px;
		max-width: 24%;
		height: 400px;
	}

	.el-card {
		border-radius: 10px;
		height: 400px !important;
	}

	.desc-box {
		margin-top: 30px;
	}
</style>
